<template>
  <div class="location-showcase" :style="backgroundStyle">
    <!-- 左侧轮播图 -->
    <div class="carousel-container">
      <el-carousel :interval="3000" :autoplay="true" :loop="false" @change="updateBackgroundImage">
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <div class="carousel-item">
            <img :src="image" alt="景点图片" class="carousel-image" />
            <div class="overlay-text">
              {{ selectedProvince.name }} 
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 右侧地图 -->
    <div class="map-container" id="map-container"></div>
  </div>
</template>

<script>
import { ref, onMounted,watch} from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus';
import 'element-plus/dist/index.css';
import { BaiduMap, BaiduMapMarker, BaiduMapNavigation } from 'vue-baidu-map-3x'; 

export default {
  name: "FirstShow",
  props: {
    filteredSpots: Array,
    selectedProvince: {
      type: Object,
      default: () => ({
      name: "中国",
      introduction: "best"
      // 你也可以添加其他属性，例如推荐景点的id数组：
      // recommendedSpotIds: [101, 202, 303, 404]
    })
    }
  },
  setup(props) {
    // 轮播图数据
    const images = ref([
      'https://picsum.photos/700/400',  // 示例图片
      'https://picsum.photos/700/400?random=1',
      'https://picsum.photos/700/400?random=2'
    ]);

    // 省份坐标映射
    const provinceCoordinatesMap = {
  中国: { lng: 116.404, lat: 39.915 }, // 全国中心（北京）
  北京: { lng: 116.4074, lat: 39.9042 },
  天津: { lng: 117.1902, lat: 39.1256 },
  河北: { lng: 114.5025, lat: 38.0456 },
  山西: { lng: 112.5492, lat: 37.857 },
  内蒙古: { lng: 111.6708, lat: 40.8183 },
  辽宁: { lng: 123.4291, lat: 41.7968 },
  吉林: { lng: 125.3245, lat: 43.8868 },
  黑龙江: { lng: 126.6425, lat: 45.7569 },
  上海: { lng: 121.4737, lat: 31.2304 },
  江苏: { lng: 118.7674, lat: 32.0415 },
  浙江: { lng: 120.1536, lat: 30.2875 },
  安徽: { lng: 117.283, lat: 31.8612 },
  福建: { lng: 119.3062, lat: 26.0753 },
  江西: { lng: 115.8922, lat: 28.6765 },
  山东: { lng: 117.0009, lat: 36.6758 },
  河南: { lng: 113.6654, lat: 34.757 },
  湖北: { lng: 114.2986, lat: 30.5844 },
  湖南: { lng: 112.9823, lat: 28.1941 },
  广东: { lng: 113.2806, lat: 23.1252 },
  广西: { lng: 108.320, lat: 22.824 },
  海南: { lng: 110.3312, lat: 20.0313 },
  重庆: { lng: 106.5516, lat: 29.563 },
  四川: { lng: 104.0657, lat: 30.6595 },
  贵州: { lng: 106.7135, lat: 26.5783 },
  云南: { lng: 102.7123, lat: 25.0406 },
  西藏: { lng: 91.1322, lat: 29.6604 },
  陕西: { lng: 108.948, lat: 34.2632 },
  甘肃: { lng: 103.8236, lat: 36.058 },
  青海: { lng: 101.7789, lat: 36.6232 },
  宁夏: { lng: 106.2782, lat: 38.4664 },
  新疆: { lng: 87.6177, lat: 43.7928 },
  香港: { lng: 114.1694, lat: 22.3193 },
  澳门: { lng: 113.5439, lat: 22.1987 },
  台湾: { lng: 121.5091, lat: 25.0443 }
};

    // 地图数据
    const center = ref(provinceCoordinatesMap[props.selectedProvince.name] || { lng: 116.404, lat: 39.915 });
    const zoom = ref(9);

    // 初始化地图
    const map = ref(null);
    const localSearch = ref(null);
    
    const initMap = () => {
      if (window.BMap) {
        // 不要删下面一行英文注释，否则跑不了
        /* eslint-disable no-undef */
        map.value = new BMap.Map('map-container');
        const point = new BMap.Point(center.value.lng, center.value.lat);
        map.value.centerAndZoom(point, zoom.value);  // 设置地图中心和缩放级别

        // 添加地图控件
        map.value.addControl(new BMap.NavigationControl());  // 缩放控件
        map.value.addControl(new BMap.ScaleControl());  // 比例尺控件
        map.value.enableScrollWheelZoom(true);  // 启用滚轮缩放

        // 设置图钉
        const marker = new BMap.Marker(point);
        map.value.addOverlay(marker);  // 添加图钉

        // 初始化本地搜索
        localSearch.value = new BMap.LocalSearch(map.value, {
          renderOptions: { map: map.value }
        });
      }
    };

    onMounted(() => {
      initMap();  // 初始化地图
    });

    // 监听省份变化，更新地图
    watch(() => props.selectedProvince, (newProvince) => {
      center.value = provinceCoordinatesMap[newProvince.name] || { lng: 116.404, lat: 39.915 };
      initMap();  // 重新初始化地图
    });

    return {
      images,
      center,
      zoom
    };
  }
}
</script>

<style scoped>
.location-showcase {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 0 20px;
  gap: 0px;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}

/* 轮播图 */
.carousel-container {
  flex: 3;
  height: 550px;
  position: relative;
}

.carousel-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左下角文字 */
.overlay-text {
  position: absolute;
  bottom: 10px;
  left: 15px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
}

/* 地图 */
.map-container {
  flex: 1.2;
  height: 300px;
}

.baidu-map {
  width: 100%;
  height: 100%;
}
</style>
